<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花瓣网</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="page" class="page">
        <!--头部-->
        <header id="header" class="header">
            <div id="header_in" class="header-in">
                <div class="header-left">
                    <ul>
                        <li class="logo-pic"><h1><a href=""></a></h1></li>
                        <li><a href="">发现</a></li>
                        <li><a href="">最新</a></li>
                        <li><a href="">美思</a></li>
                        <li><a href="">活动<span class="new">new</span></a></li>
                        <li><a href="">教育</a></li>
                        <li><a href="">...</a></li>
                    </ul>
                </div>
                <div class="header-center">
                    <input id="query" name="query" size="27" type="text" placeholder="搜索你喜欢的" value="">
                </div>
                <div class="header-right">
                    <a href="javascript:;" class="register" id="register">
                        <span class="text">注册</span>
                    </a>
                    <a href="#" class="login" id="login">
                        <span class="text">登录</span>
                    </a>
                    </a>
                </div>
            </div>
        </header>
        <!--中间广告切换-->
        <section id="slider_banner" class="slider-banner">
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </section>
        <!--快速登录-->
        <section id="quick_login" class="quick-login">
            <div class="quick-login-in">
                <div class="intro">
                    <div class="title">国内最优质图片灵感库</div>
                    <div>已有数百万出众网友，用花瓣保存喜欢的图片。</div>
                </div>
                <div class="login_icon">
                    <ul>
                        <li><a href=""><span></span></a></li>
                        <li><a href=""><span></span></a></li>
                        <li><a href=""><span></span></a></li>
                        <li><a href=""><span></span></a></li>
                    </ul>
                    <div class="tip_text">
                        <span class="line_left"></span>
                        <span class="text">用以上社交帐号直接登录</span>
                        <span class="line_right"></span>
                    </div>
                </div>
            </div>
        </section>
        <!--吸顶效果-->
        <section id="top_nav" class="top-nav">
            <div class="top-nav-in">
                <div class="left">
                    <p>国内最优质图片灵感库</p>
                    <p>已有数百万出众网友，用花瓣保存喜欢的图片。</p>
                </div>
                <div class="right">
                    <ul>
                        <li><p>用社交帐号直接登录：</p></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </div>
        </section>
        <!--类型标题-->
        <section id="type_title"  class="type-title">
            <div class="type-title-in">
                <span class="line-left"></span>
                <span>美图</span>
                <span class="line-right"></span>
            </div>
        </section>
        <!--选项卡-->
        <div id="tab" class="tab">
            <div id="tab_header" class="tab-header">
                <ul>
                    <li class="current">采集</li>
                    <li>推荐画板</li>
                    <li>推荐用户</li>
                </ul>
            </div>
            <div id="tab_content" class="tab-content">
                <div class="dom" style="display: block">
                     <div class="dom_top">
                         <ul>
                             <li><a href="" title="花瓣，陪你做生活的设计师"></a></li>
                             <li><a href="" title="句子的温度"></a></li>
                             <li><a href="" title="每天送自己一句话"></a></li>
                             <li><a href="" title="孤独患者"></a></li>
                             <li><a href="" title="笔尖的思绪"></a></li>
                         </ul>
                     </div>
                     <div class="dom-pull" id="dom_pull">
                     </div>
                </div>
                <div class="dom">
                    第二个
                </div>
                <div class="dom">
                    第三个
                </div>
            </div>
        </div>
    </div>
    <!--右边浮动-->
    <div id="elevator_item" class="elevator-item">
        <a href="javascript:;" id="elevator" class="elevator" title="回到顶部"></a><br>
        <a href="" class="plus"></a>
    </div>
    <!--登录面板-->
    <section id="mask" class="mask">
        <div id="mask_center" class="mask-center">
            <!--关闭-->
            <a href="#" class="close-btn" id="close_btn"></a>
            <!--logo-->
            <img class="logo-img" src="images/logo_2x.png" alt="">
            <!--内容-->
            <div class="center_box">
                <!--第三方帐号登录-->
                <div class="txtBox">
                    <span></span>
                    <span class="txt">使用第三方帐号登录</span>
                    <span></span>
                </div>
                <!--按钮图片-->
                <div class="buttons">
                    <a href="#" title="微博帐号登录" rel="nofollow" class="weibo"></a>
                    <a href="#" title="QQ帐号登录" rel="nofollow" class="qzone"></a>
                    <a href="#" title="微信帐号登录" rel="nofollow" class="wechat"></a>
                    <a href="#" title="豆瓣帐号登录" rel="nofollow" class="douban"></a>
                    <a href="#" title="人人帐号登录" rel="nofollow" class="renren"></a>
                </div>
                <div class="txtBox">
                    <span></span>
                    <span class="txt">使用手机号/邮箱登录</span>
                    <span></span>
                </div>
                <!--表单-->
                <form action="" method="post" class="mail-login">
                    <input type="hidden" name="_ref" value="frame">
                    <input type="text" name="email" placeholder="输入手机号或者邮箱" class="clear-input">
                    <input name="password" type="password" placeholder="密码" class="clear-input">
                    <a href="#" onclick="return false;" class="btn btn18 rbtn">
                        <span class="text"> 登录
                        </span>
                    </a>
                </form>
                <div class="switch-back">
                    <a class="red-link">忘记密码»</a>
                    还没有花瓣帐号？
                    <a class="red-link">点击注册»</a>
                </div>
            </div>
        </div>
    </section>
<script src="js/MyFunc.js"></script>
<script src="js/Underscore-min.js"></script>
<script src="js/waterFull.js"></script>
<script src="js/index.js"></script>
<script>
    $("<div class=\"schedule_item\">\n" +
        "\t\t\t\t\t<ul>\n" +
        "\t\t\t\t\t\t<li></li>\n" +
        "\t\t\t\t\t\t<li></li>\n" +
        "\t\t\t\t\t\t<li></li>\n" +
        "\t\t\t\t\t\t<li></li>\n" +
        "\t\t\t\t\t\t<li></li>\n" +
        "\t\t\t\t\t</ul>\n" +
        "\t\t\t\t</div> ")
</script>
</body>
</html>